import { Button, Table, Tag } from 'antd';
import { useState } from 'react';
import { connect } from 'react-redux';
import { Column } from './Column';

function ListPage({ userList, dispatch }) {
  const [columns, setColumn] = useState(Column);
  userList = userList.map((user) => {
    let name = String(user.name);
    let split = name.split(' ', 2);
    if (split.length === 2) {
      let firstName = split[0];
      let lastName = split[1];
      return {
        ...user,
        firstName,
        lastName,
      };
    }
    return user;
  });
  return (
    <div>
      <reTable
        columns={columns}
        data={userList}
        dispatch={dispatch}
      ></reTable>
    </div>
  );
}
export default connect(({ userList }) => {
  return {
    userList: userList,
  };
})(ListPage);
